<template>
    <div class="ms-doc">
        <el-card class="box-card" :key="index" v-if="data.items" v-for="(item,index) in data">
            <div slot="header" class="clearfix">
                <span>{{getTitle(index)+'数'}}</span>
            </div>
            <div class="num">
                共<span class="all">{{item.show + item.hidden}}</span>条数据，其中显示<span class="show">{{item.show}}</span>篇，隐藏<span class="hidden">{{item.hidden}}</span>篇
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                data: {}
            }
        },
        created() {
            this.__getData()
        },
        methods: {
            getTitle(string) {
                let title = '';
                switch(string) {
                    case 'items': 
                        title = '文章';
                        break;
                    case 'comments':
                        title = '评论';
                        break;
                    case 'users':
                        title = '用户';
                        break;
                    case 'notes':
                        title = '笔记';
                        break;
                    default: 
                        break;
                }
                return title;
            },
            __getData(){
                this.$http.get('/counts').then((response)=> {
                    this.data = response.data
                })
            }
        }
    }
</script>

<style scoped>
    .ms-doc .el-card {
        width: 45%;
        margin: 20px 2%;
        display: inline-block;
    }
    .ms-doc .el-card .num>span {
        padding: 0 5px;
    }
    .ms-doc .el-card .all{
        color: #7d7dff;
    }
    .ms-doc .el-card .show{
        color: #28ff28;
    }
    .ms-doc .el-card .hidden{
        color: #f75000;
    }
</style>